<%@  Title="SmartBooks- My Books" %>

<com:TContent ID="Main">
<com:TPanel ID="navigatedUserCntBook"  >
<ul id="tab_Menu" class="tabBoxes">
	<li id="profile_tap" class="" view="Profile">
		<com:THyperLink Text="Profile" CssClass="tab_link"
    	NavigateUrl="<%= $this->Service->constructUrl('users.ProfileUser',array('id' => $this->id)) %>"
    	Visible="<%= !$this->User->IsGuest %>" /></li>
	<li id="friend_tap" class="">
		<com:THyperLink Text="Friends" CssClass="tab_link"
    	NavigateUrl="<%=  $this->Service->constructUrl('users.FriendsUser',array('id' => $this->id))  %>"
    	Visible="<%= !$this->User->IsGuest %>" /></li>
     <li id="books_tap" class="selected"><com:THyperLink Text="My Books" CssClass="tab_link"
    NavigateUrl="<%=  $this->Service->constructUrl('users.BooksUser',array('id' => $this->id))  %>"
    Visible="<%= !$this->User->IsGuest %>" /></li>
	<li id="image_tap" class=""><com:THyperLink Text="Images" CssClass="tab_link"
    NavigateUrl="<%=  $this->Service->constructUrl('users.ImageContainer',array('id' => $this->id))  %>"
    Visible="<%= !$this->User->IsGuest %>" />
	</li>
</ul>
</com:TPanel>

<div id = "mainTopic">
<h1 class = "content"><%=$this->getCurrentRecord()->username %>'s Books (<com:TLiteral ID="bookCount"/>)</h1>
		<com:TLiteral ID="bookResult" Text=""/>	
		
</div>
 
<div class="booklist" >
	<com:TLiteral ID="bookIDData" />
	<com:TRepeater ID="Repeater_bookItem"
	ItemRenderer="Application.pages.users.BookDetailsRenderer"
	AllowPaging="true"
	AllowCustomPaging="true"
	PageSize="10"    />
	<com:TPager ControlToPaginate="Repeater_bookItem" OnPageIndexChanged="bookItem_pageChanged" />
</div>

<com:TButton Text="Save book" ID="btnSaveBook" OnClick="saveBookClicked" Visible="false"/> 
<hr/>

<com:TPanel ID="userPanel" >
	<com:TButton  CssClass="common_btn" Text="Create"  OnClick="createbookClicked" />
	<com:TButton  CssClass="common_btn" Text="Edit"  Attributes.onclick="startEditBook(Book.getCurrentLeftPage(),Book.getCurrentRightPage());return false;"/>
</com:TPanel>
<br />
<div class="bookInfo">
	<span style="font-weight: bold; margin: 10px 0px">BookName: </span>
	<span id="BookName"></span>
	<br/><br/>
	<span style="font-weight: bold; margin: 10px 0px">BookDecription: </span>
	<span id="BookDesc"></span>
	<br/>
</div>


<br/>
<script type="text/javascript" src="assets/js/Genesis/Options/wz_tooltip.js"></script>
<div id="bookid" ></div>
<!-- Start Tong's Book -->
<div id = "aBook">
<script type="text/javascript" src="assets/js/bookflip.js"></script>
	<div id = "myIndex"  style="height:40px;width:100%;color:white;position:relative;z-index:1;overflow:hidden;" >
	</div>
	<div id="myBook" align = "center">
	</div>

	<textarea id="whizzy" rows="10" cols="10" style="width:600px; height:150px; left: 200px; top: 580px;">
    </textarea>
		
    <script type="text/javascript">	
		ScrollFreeze = /*2843293230303620532E4368616C6D657273*/
		{
			// Hidden Scroll bar
			on : function(e)
			{
				if(_dragElement != null)
				{
					//document.getElementsByTagName("html")[0].style.overflow = "hidden";
				}
				//document.getElementsByTagName("html")[0].style.overflow = "hidden";
			},
			// Show Scroll bar
			off : function()
			{
				document.getElementsByTagName("html")[0].style.overflow = "auto";
			}
		}
	
		// Add action for show selection for Genesis object 
		//Public array for add all  Book Genesis.
 		var bookGenesisContainer = new Array(); 
	
		var toolbar_width  = 600;  	// Edit for setting toolbar width
		var toolbar_height = 75;	// Edit for setting toolbar height
		
		var tool_position_x = 500;
		var tool_position_y = 430;
		
		// Tool Bar
		var gen_toolbar = new Genesis(tool_position_x,tool_position_y);
    	gen_toolbar.getDomObj().style.background = "#666666";
		gen_toolbar.setSize(toolbar_width,toolbar_height);
		gen_toolbar.getDomObj().style.zIndex   = '1000';
		
		document.getElementsByTagName('Body')[0].appendChild(gen_toolbar.getDomObj());
		//document.documentElement.childNodes[1].appendChild(gen_toolbar.getDomObj());
		
		var width  = 45;
    	var height = 45;
   		var toolbar = new BookToolbar(width,height,75,75,toolbar_width,toolbar_height);
		gen_toolbar.getDomObj().appendChild(toolbar.getDomObj());
   		//toolbar.setImageMaxWidth(200);
   		toolbar.addImage("assets/Pic/icon/container.png",width,height);
		toolbar.addImage("assets/Pic/icon/photo.png",width,height);
   		toolbar.addImage("assets/Pic/icon/textbox.png",width,height);
   		toolbar.addImage("assets/Pic/icon/embeded.png",width,height);
   		toolbar.addImage("assets/Pic/icon/save.png",width,height);
   		toolbar.genToolbar();
   		
		// Add link To Image View bar
   		var toolbarIcon = toolbar.getImgObj();
		toolbarIcon[0].getDomObj().onmouseover = function(e) 
			{
				Tip('Container');
			}
		toolbarIcon[1].getDomObj().onmouseover = function(e) 
			{
				Tip('Picture');
			}
		toolbarIcon[2].getDomObj().onmouseover = function(e) 
			{
				Tip('Text Editor');
			}
		toolbarIcon[3].getDomObj().onmouseover = function(e) 
			{
				Tip('Embedded');
			}
		toolbarIcon[4].getDomObj().onmouseover = function(e) 
			{
				Tip('Save');
			}
		for(var i = 0; i<toolbarIcon.length;i++)
		{
			toolbarIcon[i].getDomObj().onmouseout = function(e) 
			{
				UnTip();
			}
		}
   		toolbarIcon[0].getDomObj().onmousedown = function(e) 
		{
			//Genesis tool bar
			gen_toolbar.getDomObj().style.zIndex      = '0';
			gen_genesisview.getDomObj().style.zIndex  = '1000';
			_state									  = 'Genesis';

			// Resize Icon bar to original
			toolbar.resizeToDefault();
		}
		toolbarIcon[1].getDomObj().onmousedown = function(e) 
		{
			//Image tool bar
			gen_toolbar.getDomObj().style.zIndex      = '0';
			gen_imageview.getDomObj().style.zIndex    = '1000';
			_state									  = 'BookImage';
			
			// Resize Icon bar to original
			toolbar.resizeToDefault();			
		}
		toolbarIcon[2].getDomObj().onmousedown = function(e) 
		{
			gen_toolbar.getDomObj().style.zIndex      = '0';
			gen_contentview.getDomObj().style.zIndex  = '1000';
			_state									  = 'Content';
			
			// Resize Icon bar to original
			toolbar.resizeToDefault();			
		}		
		toolbarIcon[3].getDomObj().onmousedown = function(e) 
		{
			gen_toolbar.getDomObj().style.zIndex             = '0';
			gen_externalembededview.getDomObj().style.zIndex = '1000';
			_state									  		 = 'ExternalEmbeded';
			
			// Resize Icon bar to original
			toolbar.resizeToDefault();			
		}		
		toolbarIcon[4].getDomObj().onmousedown = function(e) 
		{
			//loadPage(user_id,book_id,1);
			//user_id,book_id,page_number,page_data
			// End edit book
			if(Book.getCurrentLeftPage() == Book.getCurrentRightPage())
			{	
				savePage(user_id,book_id,Book.getCurrentLeftPage()+1,RWXml.saveXML(bookGenesisContainer[0],'1'));
			}
			else
			{
				savePage(user_id,book_id,Book.getCurrentLeftPage()+1,RWXml.saveXML(bookGenesisContainer[0],'1'));
				savePage(user_id,book_id,Book.getCurrentRightPage()+1,RWXml.saveXML(bookGenesisContainer[1],'1'));
			}
			stopEditBook();
			
			//gen_toolbar.getDomObj().style.zIndex      = '0';
			
			// Resize Icon bar to original
			//toolbar.resizeToDefault();
		}				
	</script>
	
	<script type="text/javascript">
		var _startX = 0;        // mouse starting positions
		var _startY = 0;
		var _offsetX = 0;       // current element offset
		var _offsetY = 0;
		var _dragElement;		// needs to be passed from OnMouseDown to OnMouseMove
		var _select_genesisElement = null;		  // For verify the genesis that must to add the genesis object from user.
		var _select_bookGenesis    = null;		  // For keep the book that user select genesis
		var _state				   = 'normal'	  // State of Genesis Component
		
		// Show Edit Book Event
		function genesis_OnMouseDown(e)
		{
			// Disable mouse event
			//ScrollFreeze.on();
			
			if (e == null)
			{
				e = window.event; 
			}
			
			// for IE, left click == 1 
			// for Firefox, left click == 0                                                                                                                        document must not have any object on drag
			if ((e.button == 1 && window.event != null || e.button == 0) && document.onmousemove == null) 
			{
				if(_dragElement != null)
				{
					// Re all of event if it's change the select Genesis component
					if(_dragElement.getDomObj() != this)
					{
						_dragElement.getDomObj().onmouseover 		= genesis_OnMouseOver;
						_dragElement.getDomObj().onmouseout  		= genesis_OnMouseOut;
						_dragElement.getDomObj().onmousedown        = genesis_OnMouseDown;
						_dragElement = null;
					}
				}
				
				// set Zindex and border
				this.style.zIndex       = '1001';
				this.style.border 	    = "";
				this.style.borderStyle  = 'solid';
				this.style.borderColor  = "black";
				this.style.borderWidth  = 'thin';
				
				// Remove it's self
				this.onmouseover	= null;
				this.onmouseout  	= null;
				this.onmousedown    = null;
				
				// grab the mouse position 
				_startX = e.clientX;
				_startY = e.clientY; 
				
				_dragElement = null
				
				for (var i = bookGenesisContainer.length-1;i>=0;i--) 
				{
					if(_dragElement != null)
					{
						break;
					}
					for(var j = bookGenesisContainer[i].length-1;j>=0;j--)
					{
						if(bookGenesisContainer[i][j].getDomObj() == this)
						{
							_dragElement = bookGenesisContainer[i][j];
							// Remove Genesis Object out of the page
							array_remove(bookGenesisContainer[i],j);
							break;	
						}
					}
				}
				
				_dragElement.getDomObj().style.left = findPosX(_dragElement.getDomObj())+'px';
				_dragElement.getDomObj().style.top  = findPosY(_dragElement.getDomObj())+'px';
				
				// grab the clicked element's position 
				_offsetX = ExtractNumber(_dragElement.getDomObj().style.left) - mouseX(e);
				_offsetY = ExtractNumber(_dragElement.getDomObj().style.top)  - mouseY(e);
				
				// cancel out any text selections
				document.body.focus();
				
				// tell our code to start moving the element with the mouse 
				document.onmousemove = genesis_OnMouseMove;
				
				_dragElement.getDomObj().onmouseup = genesis_OnMouseUp;
				
				// prevent text selection in IE 
				document.onselectstart = function () { return false; }; 
				// prevent IE from trying to drag an image 
				this.ondragstart = function() { return false; }; 
				// prevent text selection (except IE) 
				
				// Move node to body node
				document.getElementsByTagName('Body')[0].appendChild(this);
				//document.documentElement.childNodes[1].appendChild(this);
				
				// Add Resize 
				//setResizeAreaPosition(_dragElement);
				_resizeArea.getDomObj().style.display     = "none"; 	// hidden the _resizeArea
				
				// Add Property Bar Object
				// Clear old Property first
				for (var i = gen_property.getDomObj().childNodes.length-1;i>=0;i--){
					gen_property.getDomObj().removeChild(gen_property.getDomObj().childNodes[i]);
				}
				
				gen_property.getDomObj().appendChild(_dragElement.getProperty());
				_dragElement.syncProperty();
				addMove_Propertybar_action();
				
				
				// Set select genesis Element
				var mouse_x = mouseX(e);
				var mouse_y = mouseY(e);
				_select_genesisElement = null;
				for (var i = bookGenesisContainer.length-1;i>=0;i--)
				{
					for(var j = bookGenesisContainer[i].length-1;j>=0;j--)
					{
						var genesis_obj = bookGenesisContainer[i][j];
						// Add selection over genesis
						if(findPosX(genesis_obj.getDomObj())  < mouse_x  && (findPosX(genesis_obj.getDomObj()) + parseInt(genesis_obj.getDomObj().style.width))  > mouse_x &&
						   findPosY(genesis_obj.getDomObj())  < mouse_y && (findPosY(genesis_obj.getDomObj())  + parseInt(genesis_obj.getDomObj().style.height)) > mouse_y &&
						   _select_genesisElement   == null &&
						   genesis_obj.getDomType() == "Genesis" )
						{
							if(_dragElement.getDomType() == "Genesis" && j != 0)
							{
								//Genesis Can add into the page only
								// Genesis Can not add into another genesis
							} 
							else
							{
								genesis_obj.getDomObj().style.zIndex	   = 1001;
								genesis_obj.getDomObj().style.borderStyle  = 'solid';
								genesis_obj.getDomObj().style.borderWidth  = 'thin';
								genesis_obj.getDomObj().style.borderColor  = "#FF0000";
								_select_genesisElement = genesis_obj;
								_select_bookGenesis    = bookGenesisContainer[i];						
							}
						}
						else
						{
							genesis_obj.getDomObj().style.zIndex	   = "";
							genesis_obj.getDomObj().style.border 	   = "";
							genesis_obj.getDomObj().style.borderColor  = "";
						}
					}
				}
				return false;
			}
		}
		
		function genesis_OnMouseMove(e)
		{
			// Disable mouse event
			//ScrollFreeze.on();
			
			if (e == null) 
			{
				var e = window.event; 
			}
			// this is the actual "drag code"
			//_dragElement.getDomObj().style.left = (_offsetX + e.clientX - _startX) + 'px'; 
			//_dragElement.getDomObj().style.top  = (_offsetY + e.clientY - _startY) + 'px'; 
			var mouse_x = mouseX(e);
			var mouse_y = mouseY(e);
			_dragElement.getDomObj().style.left = (mouse_x + _offsetX)+ 'px'; 
			_dragElement.getDomObj().style.top  = (mouse_y + _offsetY)+ 'px'; 
			
			// Mouse cursor must not outside genesis object
			if(findPosX(_dragElement.getDomObj()) < mouse_x && (findPosX(_dragElement.getDomObj()) + parseInt(_dragElement.getDomObj().style.width)) > mouse_x &&
			   findPosY(_dragElement.getDomObj()) < mouse_y && (findPosY(_dragElement.getDomObj()) + parseInt(_dragElement.getDomObj().style.height)) > mouse_y)
			{
				
			}
			else
			{
				_dragElement.getDomObj().style.left = (mouse_x - 5)+ 'px'; 
				_dragElement.getDomObj().style.top  = (mouse_y - 5)+ 'px'; 
			}
			
			_select_genesisElement = null;
			for (var i = bookGenesisContainer.length-1;i>=0;i--) 
			{
				for(var j = bookGenesisContainer[i].length-1;j>=0;j--)
				{
					var genesis_obj = bookGenesisContainer[i][j];
					// Add selection over genesis
					if(findPosX(genesis_obj.getDomObj())  < mouse_x  && (findPosX(genesis_obj.getDomObj()) + parseInt(genesis_obj.getDomObj().style.width))  > mouse_x &&
					   findPosY(genesis_obj.getDomObj())  < mouse_y && (findPosY(genesis_obj.getDomObj())  + parseInt(genesis_obj.getDomObj().style.height)) > mouse_y &&
					   _select_genesisElement   == null &&
					   genesis_obj.getDomType() == "Genesis" )
					{
						if(_dragElement.getDomType() == "Genesis" && j != 0)
						{
							//Genesis Can add into the page only
							// Genesis Can not add into another genesis
						} 
						else
						{
							genesis_obj.getDomObj().style.zIndex	   = 1001;
							genesis_obj.getDomObj().style.borderStyle  = 'solid';
							genesis_obj.getDomObj().style.borderWidth  = 'thin';
							genesis_obj.getDomObj().style.borderColor  = "#FF0000";
							_select_genesisElement = genesis_obj;
							_select_bookGenesis    = bookGenesisContainer[i];						
						}
					}
					else
					{
						genesis_obj.getDomObj().style.zIndex	   = "";
						genesis_obj.getDomObj().style.border 	   = "";
						genesis_obj.getDomObj().style.borderColor  = "";
					}
				}
			}
			
			// Add Resize 
			setResizeAreaPosition(_dragElement);
			
			// Sync new Property
			_dragElement.syncProperty();
			
		}
		
		function genesis_OnMouseUp(e)
		{
			// Disable mouse event
			//ScrollFreeze.off();
			if (_dragElement != null)
		    {
				// we're done with these events until the next OnMouseDown 
				document.onmousemove = null; 
				document.onselectstart = null; 
				_dragElement.getDomObj().ondragstart = null; 
				_dragElement.getDomObj().onmouseup   = null;
				
				// Verify for Adding Genesis Object
				if (_select_genesisElement != null) 
				{
					// Re all genesis default value
					_select_genesisElement.getDomObj().style.zIndex	   	 = "";
					_select_genesisElement.getDomObj().style.border 	 = "";
					_select_genesisElement.getDomObj().style.borderColor = "";
					
					// Re all image to default value
					_dragElement.getDomObj().style.zIndex	 = "";
				
					_dragElement.getDomObj().style.left = findPosX(_dragElement.getDomObj()) - findPosX(_select_genesisElement.getDomObj())+'px';
					_dragElement.getDomObj().style.top  = findPosY(_dragElement.getDomObj()) - findPosY(_select_genesisElement.getDomObj())+'px';
					
					// Set Event for show selection when mouse over
					_dragElement.getDomObj().onmouseover		= null;
					_dragElement.getDomObj().onmouseout  		= null;
					_dragElement.getDomObj().onmousedown        = genesis_OnMouseDown;
					
					// Add Genesis Object into book page
					_select_bookGenesis[_select_bookGenesis.length] = _dragElement;
					
					// Add Genesis Object
					_select_genesisElement.getDomObj().appendChild(_dragElement.getDomObj());
					
					// Clear select genesis Element
					_select_genesisElement = null;
					
					// Sync Property
					_dragElement.syncProperty();
					
					// Add Resize 
					setResizeAreaPosition(_dragElement);
					_resizeArea.getDomObj().style.display     = ""; 	// hidden the _resizeArea
				}
				else
				{
					// Remove temp domObj
					document.getElementsByTagName('Body')[0].removeChild(_dragElement.getDomObj());
					//document.documentElement.childNodes[1].removeChild(_dragElement.getDomObj());
					
					// hidden the _resizeArea
					_resizeArea.getDomObj().style.display     = "none";
					
					// Clear old Property first
					for (var i = gen_property.getDomObj().childNodes.length-1;i>=0;i--){
						gen_property.getDomObj().removeChild(gen_property.getDomObj().childNodes[i]);
					}
					addMove_Propertybar_action();
					
					_dragElement = null;
				}
		   }
		}
	
		function genesis_OnMouseOver(e)
		{
			var setSelection = true;
			// Remove other border and zIndex
			for(var i =0;i<bookGenesisContainer.length;i++)
			{
				for(var j=0;j<bookGenesisContainer[i].length;j++)
				{
					if(bookGenesisContainer[i][j].getDomObj().style.zIndex      == 1001 && bookGenesisContainer[i][j].getDomType() == 'Genesis')
					{
						bookGenesisContainer[i][j].getDomObj().style.zIndex      	= '0';
						bookGenesisContainer[i][j].getDomObj().style.border      	= '';
						bookGenesisContainer[i][j].getDomObj().style.borderColor    = '';
					}
					else if(bookGenesisContainer[i][j].getDomObj().style.zIndex == 1001 && bookGenesisContainer[i][j].getDomType() != 'Genesis')
					{
						setSelection = false;
					}
				}
			}
			
			if(setSelection == true)
			{
				// Not show if tagName is div and DragElement is inside this tag
				if(this.tagName == "DIV" && _dragElement != null)
				{
					if(_dragElement.getDomObj().parentNode  == this)
					{
					
					}
					else
					{
						this.style.zIndex       = '1001';
						this.style.borderStyle  = 'solid';
						this.style.borderWidth  = 'thin';
						this.style.borderColor  = "#FF0000";	
					}
				}
				else
				{
					this.style.zIndex       = '1001';
					this.style.borderStyle  = 'solid';
					this.style.borderWidth  = 'thin';
					this.style.borderColor  = "#FF0000";				
				}
			}
		}
		
		function genesis_OnMouseOut(e)
		{
			// Remove other border and zIndex
			this.style.zIndex       = '0';
			this.style.border 	    = "";
			this.style.borderColor  = "";
		}
		
		function genesis_OnMouseScroll(e)
		{
			if (e == null) 
			{
				e = window.event; 
			}
			if(_dragElement != null)
			{
				//var mouse_x = mouseX(e);
				//var mouse_y = mouseY(e);
				//_dragElement.getDomObj().style.left = (mouse_x + _offsetX)+ 'px'; 
				//_dragElement.getDomObj().style.top  = (mouse_y + _offsetY)+ 'px'; 
				
				
				// this is the actual "drag code" 
				//_dragElement.getDomObj().style.left = (_offsetX + e.clientX - _startX) + 'px'; 
				//_dragElement.getDomObj().style.top  = (_offsetY + e.clientY - _startY) + 'px'; 
				// this is the actual "drag code" 
				//_offsetY = _offsetY+56;
				//_dragElement.getDomObj().style.top    = _offsetY + e.clientY +'px';
				//genesis_OnMouseMove(e);
			}
		}
		
		//adding the event listerner for Mozilla
		if(window.addEventListener) document.addEventListener('DOMMouseScroll', genesis_OnMouseScroll, false);
		//for IE/OPERA etc
		document.onmousewheel = genesis_OnMouseScroll;
	</script>
	
	<script type="text/javascript">
		// Resize Area
		var _resizeArea			   = new Genesis(-10,-10);
		_resizeArea.setSize(12,12);
		_resizeArea.getDomObj().style.background = "black";
		_resizeArea.getDomObj().style.cursor 	 = "se-resize";
		_resizeArea.getDomObj().style.zIndex     = '1002';
		_resizeArea.getDomObj().style.display    = "none"; 	// hidden the _resizeArea
		//_resizeArea.getDomObj().style.display     = ""; 	// hidden the _resizeArea
		_resizeArea.getDomObj().onmousedown      = resizeStart;
		
		document.getElementsByTagName('Body')[0].appendChild(_resizeArea.getDomObj());
		//document.documentElement.childNodes[1].appendChild(_resizeArea.getDomObj());
		
		function setResizeAreaPosition(genesis_Obj)
		{
			if(_resizeArea != null && genesis_Obj != null)
			{
				var x = findPosX(genesis_Obj.getDomObj()) + parseInt(genesis_Obj.getDomObj().style.width) - 10;
				var y = findPosY(genesis_Obj.getDomObj()) + parseInt(genesis_Obj.getDomObj().style.height)- 10;
				_resizeArea.setPosition(x,y);
			}
		}
		
		// Resize on mouse pressed
		function resizeStart(e)
		{
			// Disable mouse event
			//ScrollFreeze.on();
			if (e == null)
			{
				e = window.event; 
			}
			
			// for IE, left click == 1 
			// for Firefox, left click == 0
			if (e.button == 1 && window.event != null || e.button == 0 && _dragElement != null) 
			{		
				_resizeArea.getDomObj().onmousedown      = "";
				document.onmousemove      = resizeDrag;
				document.onmouseup        = resizeEnd;
				
				// Set cursor for resize
				document.body.style.cursor 	 = "se-resize";
				
				// cancel out any text selections
				document.body.focus();
				// prevent text selection in IE 
				document.onselectstart = function () { return false; }; 
				// prevent IE from trying to drag an image 
				this.ondragstart = function() { return false; }; 
			}
		}
		
		// Resize on mouse move
		function resizeDrag(e)
		{
			// Disable mouse event
			//ScrollFreeze.on();
			
			if (e == null)
			{
				e = window.event; 
			}
			var mouse_x = mouseX(e);
			var mouse_y = mouseY(e);
			
			var diff_x  = mouse_x - findPosX(_dragElement.getDomObj());
			var diff_y  = mouse_y - findPosY(_dragElement.getDomObj());
			
			// Size must have width >= 10 and height >= 10
			if(diff_x >= 10 && diff_y >= 10)
			{
				// Re size Genesis Object
				_dragElement.setSize(diff_x,diff_y);
				
				// Set new position of resizeArea
				setResizeAreaPosition(_dragElement);
			}
			// Sync new Property
			_dragElement.syncProperty();
			// Sync object embeded size
			if(_dragElement.getDomType() == "ExternalEmbeded")
			{
				// Set new width
				var tempCode = _dragElement.getCode();
				tempCode = tempCode.replace(/width="[0-9]+"/gi,"width=\""+parseInt(_dragElement.getDomObj().style.width)+"\"");
				// Set new height
				tempCode = tempCode.replace(/height="[0-9]+"/gi,"height=\""+parseInt(_dragElement.getDomObj().style.height)+"\"");
				_dragElement.setCode(tempCode);
			}
		}
		
		// Resize on mouse up
		function resizeEnd(e)
		{
			// Disable mouse event
			//ScrollFreeze.off();
			
			if (e == null)
			{
				e = window.event;
			}
			_resizeArea.getDomObj().onmousedown      = resizeStart;
			document.body.style.cursor 	 			 = "";
			document.onmousemove    = null; 
			document.onselectstart  = null; 
			document.onmousemove    = null;
			document.onmouseup      = null;
		}
	</script>
	
	<script type="text/javascript">
	//Add Genesis Event
		function OnMouseDown(e)
		{
			// Disable mouse event
			//ScrollFreeze.on();
			
			if (e == null)
			{
				e = window.event; 
			}
			
			// IE uses srcElement, others use target 
			var target = e.target != null ? e.target : e.srcElement; 
						
			// for IE, left click == 1 
			// for Firefox, left click == 0
			if ((e.button == 1 && window.event != null || e.button == 0)&&(target != null)) 
			{
				var temp_posX = findPosX(target);
				var temp_posY = findPosY(target);
				
				// Clone the target element
				var target_clone ;
				
				if(BrowserDetect.browser == "Explorer" && BrowserDetect.version == 6 && target.name != "")
				{
					target_clone = new BookImage(target.name,temp_posX,temp_posY);
					target_clone.setSize(target.width,target.height);
				}
				else
				{
					target_clone = new BookImage(target.src,temp_posX,temp_posY);
					target_clone.setSize(target.width,target.height);
				}
				target_clone.getDomObj().style.zIndex = 1001;
				
				// Body node
				document.getElementsByTagName('Body')[0].appendChild(target_clone.getDomObj());
				//document.documentElement.childNodes[1].appendChild(target_clone.getDomObj());
				
				// grab the mouse position 
				_startX = e.clientX;
				_startY = e.clientY; 
				
				// grab the clicked element's position 
				_offsetX = ExtractNumber(target_clone.getDomObj().style.left) - mouseX(e);
				_offsetY = ExtractNumber(target_clone.getDomObj().style.top)  - mouseY(e);
				//_offsetX = ExtractNumber(target_clone.getDomObj().style.left); 
				//_offsetY = ExtractNumber(target_clone.getDomObj().style.top);
				
				// Verify the current dragElement
				if(_dragElement != null) 
				{
					// hidden the _resizeArea
					_resizeArea.getDomObj().style.display     = "none";
				
					// Set Event for show selection when mouse over
					_dragElement.getDomObj().onmouseover		= genesis_OnMouseOver;
					_dragElement.getDomObj().onmouseout  		= genesis_OnMouseOut;
					_dragElement.getDomObj().onmousedown        = genesis_OnMouseDown;
				}
				
				// we need to access the element in OnMouseMove 
				_dragElement = target_clone;
				
				// tell our code to start moving the element with the mouse 
				document.onmousemove = OnMouseMove;
				
				_dragElement.getDomObj().onmouseup = OnMouseUp;
				
				// Verify state for match with dragElement
				if(_state == 'Genesis')
				{
					_dragElement.setSize(200,200);
				}
				else if(_state == 'BookImage')
				{
					_dragElement.setSize(75,75);
				}
				else if(_state == 'Content')
				{
					_dragElement.setSize(150,150);
				}
				else
				{
					
				}
				
				// Remove All Property bar
				gen_property.getDomObj().innerHTML = "";
				addMove_Propertybar_action();
				
				// cancel out any text selections
				document.body.focus();
				
				// prevent text selection in IE 
				document.onselectstart = function () { return false; }; 
				// prevent IE from trying to drag an image 
				target.ondragstart = function() { return false; }; 
				// prevent text selection (except IE) 

				return false; 
			}
		}
		function OnMouseMove(e)
		{
			// Disable mouse event
			//ScrollFreeze.on();
			
			if (e == null) 
			{
				var e = window.event; 
			}
			// this is the actual "drag code" 
			var mouse_x = mouseX(e);
			var mouse_y = mouseY(e);
			_dragElement.getDomObj().style.left = (mouse_x + _offsetX)+ 'px'; 
			_dragElement.getDomObj().style.top  = (mouse_y + _offsetY)+ 'px'; 
			
			// Mouse cursor must not outside genesis object
			if(findPosX(_dragElement.getDomObj()) < mouse_x && (findPosX(_dragElement.getDomObj()) + parseInt(_dragElement.getDomObj().style.width)) > mouse_x &&
			   findPosY(_dragElement.getDomObj()) < mouse_y && (findPosY(_dragElement.getDomObj()) + parseInt(_dragElement.getDomObj().style.height)) > mouse_y)
			{
				
			}
			else
			{
				_dragElement.getDomObj().style.left = (mouse_x - 5)+ 'px'; 
				_dragElement.getDomObj().style.top  = (mouse_y - 5)+ 'px'; 
			}
			
			_select_genesisElement = null;
			for (var i = bookGenesisContainer.length-1;i>=0;i--) 
			{
				var verifyPage  = false;
				var genesis_obj = bookGenesisContainer[i][0];
				if(findPosX(genesis_obj.getDomObj())  < mouse_x  && (findPosX(genesis_obj.getDomObj()) + parseInt(genesis_obj.getDomObj().style.width))  > mouse_x &&
					findPosY(genesis_obj.getDomObj())  < mouse_y && (findPosY(genesis_obj.getDomObj())  + parseInt(genesis_obj.getDomObj().style.height)) > mouse_y &&
					_select_genesisElement   == null &&
					genesis_obj.getDomType() == "Genesis" )
				{
					verifyPage = true;
				}
				for(var j = bookGenesisContainer[i].length-1;j>=0;j--)
				{
					var genesis_obj = bookGenesisContainer[i][j];
					// Add selection over genesis
					if(findPosX(genesis_obj.getDomObj())  < mouse_x  && (findPosX(genesis_obj.getDomObj()) + parseInt(genesis_obj.getDomObj().style.width))  > mouse_x &&
					   findPosY(genesis_obj.getDomObj())  < mouse_y && (findPosY(genesis_obj.getDomObj())  + parseInt(genesis_obj.getDomObj().style.height)) > mouse_y &&
					   _select_genesisElement   == null &&
					   genesis_obj.getDomType() == "Genesis" )
					{
						if(_state == "Genesis" && j != 0)
						{
							//Genesis Can add into the page only
							// Genesis Can not add into another genesis
						} 
						else if(verifyPage == true)
						{
							genesis_obj.getDomObj().style.zIndex	   = 1000;
							genesis_obj.getDomObj().style.borderStyle  = 'solid';
							genesis_obj.getDomObj().style.borderWidth  = 'thin';
							genesis_obj.getDomObj().style.borderColor  = "#FF0000";
							_select_genesisElement = genesis_obj;
							_select_bookGenesis    = bookGenesisContainer[i];						
						}
					}
					else
					{
						genesis_obj.getDomObj().style.zIndex	   = "";
						genesis_obj.getDomObj().style.border 	   = "";
						genesis_obj.getDomObj().style.borderColor  = "";
					}
				}
			}
		}
		function OnMouseUp(e)
		{
			// Disable mouse event
			//ScrollFreeze.off();
			
		   if (_dragElement != null)
		   {	
				// we're done with these events until the next OnMouseDown 
				document.onmousemove = null; 
				document.onselectstart = null; 
				_dragElement.getDomObj().ondragstart = null; 
				_dragElement.getDomObj().onmouseup   = null;
				
				// Verify for Adding Genesis Object
				if (_select_genesisElement != null) 
				{
					// Re all genesis default value
					_select_genesisElement.getDomObj().style.zIndex	   	 = "";
					_select_genesisElement.getDomObj().style.border 	 = "";
					_select_genesisElement.getDomObj().style.borderColor = "";
					
					// Re all image to default value
					_dragElement.getDomObj().style.zIndex	 = "";
				
					_dragElement.getDomObj().style.left = findPosX(_dragElement.getDomObj()) - findPosX(_select_genesisElement.getDomObj())+'px';
					_dragElement.getDomObj().style.top  = findPosY(_dragElement.getDomObj()) - findPosY(_select_genesisElement.getDomObj())+'px';
					
					if(_state == 'Genesis')
					{
						var new_genesis = new Genesis(parseInt(_dragElement.getDomObj().style.left),parseInt(_dragElement.getDomObj().style.top));
						new_genesis.setSize(200,200);
						
						// Add Genesis Object into book page
						_select_bookGenesis[_select_bookGenesis.length] = new_genesis;
						
						// Set Event for show selection when mouse over
						new_genesis.getDomObj().onmouseover		= genesis_OnMouseOver;
						new_genesis.getDomObj().onmouseout  	= genesis_OnMouseOut;
						new_genesis.getDomObj().onmousedown     = genesis_OnMouseDown;
						
						// Add Genesis
						_select_genesisElement.getDomObj().appendChild(new_genesis.getDomObj());
						
						// Remove temp domObj
						document.getElementsByTagName('Body')[0].removeChild(_dragElement.getDomObj());
					}
					else if(_state == 'BookImage')
					{
						// Add Genesis Object into book page
						_select_bookGenesis[_select_bookGenesis.length] = _dragElement;
						
						// Set Event for show selection when mouse over
						_dragElement.getDomObj().onmouseover		= genesis_OnMouseOver;
						_dragElement.getDomObj().onmouseout  		= genesis_OnMouseOut;
						_dragElement.getDomObj().onmousedown        = genesis_OnMouseDown;
						
						// Add Iamge
						_select_genesisElement.getDomObj().appendChild(_dragElement.getDomObj());
						
						// Remove temp domObj
						document.getElementsByTagName('Body')[0].removeChild(_dragElement.getDomObj());
					}
					else if(_state == 'Content')
					{
						var new_content = new Content(parseInt(_dragElement.getDomObj().style.left),parseInt(_dragElement.getDomObj().style.top),'Text Box');
						new_content.setSize(150,150);
						
						// Add Genesis Object into book page
						_select_bookGenesis[_select_bookGenesis.length] = new_content;
						
						// Set Event for show selection when mouse over
						new_content.getDomObj().onmouseover		= genesis_OnMouseOver;
						new_content.getDomObj().onmouseout  	= genesis_OnMouseOut;
						new_content.getDomObj().onmousedown     = genesis_OnMouseDown;
						
						// Add Genesis
						_select_genesisElement.getDomObj().appendChild(new_content.getDomObj());
						
						// Remove temp domObj
						document.getElementsByTagName('Body')[0].removeChild(_dragElement.getDomObj());
					}
					else if(_state == 'ExternalEmbeded')
					{
						var new_externalembeded = new ExternalEmbeded(parseInt(_dragElement.getDomObj().style.left),parseInt(_dragElement.getDomObj().style.top),'');
						new_externalembeded.setSize(150,150);
						
						// Add Genesis Object into book page
						_select_bookGenesis[_select_bookGenesis.length] = new_externalembeded;
						
						// Set Event for show selection when mouse over
						new_externalembeded.getDomObj().onmouseover		= genesis_OnMouseOver;
						new_externalembeded.getDomObj().onmouseout  	= genesis_OnMouseOut;
						new_externalembeded.getDomObj().onmousedown     = genesis_OnMouseDown;
						
						// Add Genesis
						_select_genesisElement.getDomObj().appendChild(new_externalembeded.getDomObj());
						
						// Remove temp domObj
						document.getElementsByTagName('Body')[0].removeChild(_dragElement.getDomObj());
					}
					else
					{
						// Remove temp domObj
						document.getElementsByTagName('Body')[0].removeChild(_dragElement.getDomObj());
					}
				}
				else
				{
					// Remove temp domObj
					document.getElementsByTagName('Body')[0].removeChild(_dragElement.getDomObj());
					//document.documentElement.childNodes[1].removeChild(_dragElement.getDomObj());
				}
				// this is how we know we're not dragging 				
				_dragElement = null;
		   }
		}
	</script>
	
	<script type="text/javascript">
		// Genesis genesis View Bar
		var gen_genesisview = new Genesis(tool_position_x,tool_position_y);
		gen_genesisview.getDomObj().style.background = "#666666";
		gen_genesisview.setSize(toolbar_width,toolbar_height);
		
		document.getElementsByTagName('Body')[0].appendChild(gen_genesisview.getDomObj());
		
		var table_genesisview      = new Element('table',{'style':'position:absolute;width:100%;height:100%;left:0px;top:0px;'});
		gen_genesisview.getDomObj().appendChild(table_genesisview);
		
		var tableBody_genesisview  = new Element('tbody',{});
		table_genesisview.appendChild(tableBody_genesisview);
		
		var tr_genesisview    	 = new Element('tr',{});
		tableBody_genesisview.appendChild(tr_genesisview);
		
		var td_leftButton  = new Element('td',{'width':'5%'});
		var td_display    = new Element('td',{'width':'80%'});
		var td_menu	      = new Element('td',{'width':'10%','align':'center'});
		var td_rightButton = new Element('td',{'width':'5%'});
		tr_genesisview.appendChild(td_leftButton);
		tr_genesisview.appendChild(td_display);
		tr_genesisview.appendChild(td_menu);
		tr_genesisview.appendChild(td_rightButton);
		
		var genArray = new Array();
		genArray.push("assets/Pic/image/Genesis_1.gif");
		genArray.push("assets/Pic/image/Genesis_2.gif");
		genArray.push("assets/Pic/image/Genesis_3.gif");
		
		var row 	= 1;
		var column 	= 5;
		var genesisBar = new ImageViewBar(genArray,65,65,row,column);
		td_display.appendChild(genesisBar.getDomObj());
		
		// Add image Event
		for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
		{
			genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
		}
		
		// Add button for get Previous Page
		var button_previousPage = new ButtomImage('assets/Pic/icon/arrow_left.png','assets/Pic/icon/arrow_left.png',30,65);
		button_previousPage.getDomObj().onmousedown = function(e) {
			genesisBar.getPreviousPage();
			pageIndex_Genesis.value = genesisBar.getCurrentPage();
			// Add image Event
			for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
			{
				genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
			}
   		}
		td_leftButton.appendChild(button_previousPage.getDomObj());
		
		// Add button for get Next Page
		var button_nextPage = new ButtomImage('assets/Pic/icon/arrow_right.png','assets/Pic/icon/arrow_right.png',30,65);
		button_nextPage.getDomObj().onmousedown = function(e) {
			genesisBar.getNextPage();
			pageIndex_Genesis.value = genesisBar.getCurrentPage();
			// Add image Event
			for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
			{
				genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
			}
		}
		td_rightButton.appendChild(button_nextPage.getDomObj());
		
		//Add Back to Menu Button
		var button_Menu = new ButtomImage('assets/Pic/icon/back.png','assets/Pic/icon/back.png',30,45);
		td_menu.appendChild(button_Menu.getDomObj());
		td_menu.appendChild(new Element('br',{}));
		button_Menu.getDomObj().onmousedown = function(e) 
		{
			// Display the menu bar
			gen_genesisview.getDomObj().style.zIndex = '0';
			gen_toolbar.getDomObj().style.zIndex     = '1000';
			_state								     = 'normal';			
		}
		
		// Add Text box for get Specific Page
		var pageIndex_Genesis = new Element('input',{'type':'text','size':'1','value':'1','style':'text-align:center;'});
		pageIndex_Genesis.onkeypress = function(e) {
			//update page Index			
			var characterCode
			if(e && e.which){           // NN4 specific code
				e = e
				characterCode = e.which
			}
			else {
				e = event
				characterCode = e.keyCode // IE specific code
			}
			if (characterCode == 13)
			{
				if(!isNaN(parseInt(this.value)) || parseInt(this.value) == "" || parseInt(this.value) == null)
				{
					genesisBar.getSpecificPage(parseInt(this.value));
					pageIndex_Genesis.value = genesisBar.getCurrentPage();
					// Add image Event
					for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
					{
						genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
					}
				}
				else
				{
					pageIndex_Genesis.value = genesisBar.getCurrentPage();
					// Add image Event
					for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
					{
						genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
					}
				}
			}
		}
		
		td_menu.appendChild(pageIndex_Genesis);
		var maxpage = parseInt(genArray.length/(row*column));
		if(parseInt(genArray.length%(row*column)) != 0)
		{
			maxpage++;
		}
		td_menu.insert('/'+maxpage);
		
		// Set hidden after finish create imge view bar
		gen_genesisview.getDomObj().style.zIndex = '0';
	</script>
	
	<script type="text/javascript">
		// Genesis Image View Bar
		var gen_imageview = new Genesis(tool_position_x,tool_position_y);
    	gen_imageview.getDomObj().style.background = "#666666";
		gen_imageview.setSize(600,75);
		
		
		
		document.getElementsByTagName('Body')[0].appendChild(gen_imageview.getDomObj());
		
		var table_imageview      = new Element('table',{'style':'position:absolute;width:100%;height:100%;left:0px;top:0px;'});
		gen_imageview.getDomObj().appendChild(table_imageview);
		
        var tableBody_imageview  = new Element('tbody',{});
		table_imageview.appendChild(tableBody_imageview);
		
        var tr_imageview    	 = new Element('tr',{});
		tableBody_imageview.appendChild(tr_imageview);
		
		var td_leftButton  = new Element('td',{'width':'5%'});
		var td_display    = new Element('td',{'width':'80%'});
		var td_menu	      = new Element('td',{'width':'10%','align':'center'});
		var td_rightButton = new Element('td',{'width':'5%'});
		
		tr_imageview.appendChild(td_leftButton);
		tr_imageview.appendChild(td_display);
		tr_imageview.appendChild(td_menu);
		tr_imageview.appendChild(td_rightButton);
		
		var imgArray = new Array();
		// move data from imagesUserArray to imgArray
		for(var i = 0;i < imagesUserArray.size() ; i++ )
		{
			imgArray.push(imagesUserArray[i]);
		}
		
		var row 	= 1;
		var column 	= 5;
		var imageBar = new ImageViewBar(imgArray,65,65,row,column);
		td_display.appendChild(imageBar.getDomObj());
		
		// Add image Event
		for (var i =0;i<imageBar.getDomObj().getElementsByTagName('img').length;i++)
		{
			imageBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
		}
		
		// Add button for get Previous Page
		var button_previousPage = new ButtomImage('assets/Pic/icon/arrow_left.png','assets/Pic/icon/arrow_left.png',30,65);
		button_previousPage.getDomObj().onmousedown = function(e) {
			imageBar.getPreviousPage();
			pageIndex.value = imageBar.getCurrentPage();
			// Add image Event
			for (var i =0;i<imageBar.getDomObj().getElementsByTagName('img').length;i++)
			{
				imageBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
			}
   		}
		td_leftButton.appendChild(button_previousPage.getDomObj());
		
		// Add button for get Next Page
		var button_nextPage = new ButtomImage('assets/Pic/icon/arrow_right.png','assets/Pic/icon/arrow_right.png',30,65);
		button_nextPage.getDomObj().onmousedown = function(e) {
			imageBar.getNextPage();
			pageIndex.value = imageBar.getCurrentPage();
			// Add image Event
			for (var i =0;i<imageBar.getDomObj().getElementsByTagName('img').length;i++)
			{
				imageBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
			}
		}
		td_rightButton.appendChild(button_nextPage.getDomObj());
		
		//Add Back to Menu Button
		var button_Menu = new ButtomImage('assets/Pic/icon/back.png','assets/Pic/icon/back.png',30,45);
		td_menu.appendChild(button_Menu.getDomObj());
		button_Menu.getDomObj().onmousedown = function(e) 
		{
			// Display the menu bar
			gen_imageview.getDomObj().style.zIndex = '0';
			gen_toolbar.getDomObj().style.zIndex   = '1000';
			
			_state								   = 'normal';
		}
		
		// Add Text box for get Specific Page
		var pageIndex = new Element('input',{'type':'text','size':'1','value':'1','style':'text-align:center;'});
		pageIndex.onkeypress = function(e) {
			//update page Index			
			var characterCode
			if(e && e.which){           // NN4 specific code
				e = e
				characterCode = e.which
			}
			else {
				e = event
				characterCode = e.keyCode // IE specific code
			}
			if (characterCode == 13)
			{
				if(!isNaN(parseInt(this.value)) || parseInt(this.value) == "" || parseInt(this.value) == null)
				{
					imageBar.getSpecificPage(parseInt(this.value));
					pageIndex.value = imageBar.getCurrentPage();
					// Add image Event
					for (var i =0;i<imageBar.getDomObj().getElementsByTagName('img').length;i++)
					{
						imageBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
					}
				}
				else
				{
					pageIndex.value = imageBar.getCurrentPage();
					// Add image Event
					for (var i =0;i<imageBar.getDomObj().getElementsByTagName('img').length;i++)
					{
						imageBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
					}
				}
			}
		}
		
		td_menu.appendChild(pageIndex);
		var maxpage = parseInt(imgArray.length/(row*column));
		if(parseInt(imgArray.length%(row*column)) != 0)
		{
			maxpage++;
		}
		td_menu.insert('/'+maxpage);
		
		// Set hidden after finish create imge view bar
		gen_imageview.getDomObj().style.zIndex = '0';
	</script>
	
	<script type="text/javascript">
		// Genesis Content View Bar
		var gen_contentview = new Genesis(tool_position_x,tool_position_y);
		gen_contentview.getDomObj().style.background = "#666666";
		gen_contentview.setSize(600,75);
		
		document.getElementsByTagName('Body')[0].appendChild(gen_contentview.getDomObj());
		
		var table_contentview      = new Element('table',{'style':'position:absolute;width:100%;height:100%;left:0px;top:0px;'});
		gen_contentview.getDomObj().appendChild(table_contentview);
		
		var tableBody_contentview  = new Element('tbody',{});
		table_contentview.appendChild(tableBody_contentview);
		
		var tr_contentview    	 = new Element('tr',{});
		tableBody_contentview.appendChild(tr_contentview);
		
		var td_leftButton  = new Element('td',{'width':'5%'});
		var td_display    = new Element('td',{'width':'80%'});
		var td_menu	      = new Element('td',{'width':'10%','align':'center'});
		var td_rightButton = new Element('td',{'width':'5%'});
		tr_contentview.appendChild(td_leftButton);
		tr_contentview.appendChild(td_display);
		tr_contentview.appendChild(td_menu);
		tr_contentview.appendChild(td_rightButton);
		
		var genArray = new Array();
		genArray.push("assets/Pic/image/Content_1.gif");
		genArray.push("assets/Pic/image/Content_1.gif");
		
		var row 	= 1;
		var column 	= 5;
		var genesisBar = new ImageViewBar(genArray,65,65,row,column);
		td_display.appendChild(genesisBar.getDomObj());
		
		// Add image Event
		for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
		{
			genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
		}
		
		// Add button for get Previous Page
		var button_previousPage = new ButtomImage('assets/Pic/icon/arrow_left.png','assets/Pic/icon/arrow_left.png',30,65);
		button_previousPage.getDomObj().onmousedown = function(e) {
			genesisBar.getPreviousPage();
			pageIndex_Genesis.value = genesisBar.getCurrentPage();
			// Add image Event
			for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
			{
				genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
			}
   		}
		td_leftButton.appendChild(button_previousPage.getDomObj());
		
		// Add button for get Next Page
		var button_nextPage = new ButtomImage('assets/Pic/icon/arrow_right.png','assets/Pic/icon/arrow_right.png',30,65);
		button_nextPage.getDomObj().onmousedown = function(e) {
			genesisBar.getNextPage();
			pageIndex_Genesis.value = genesisBar.getCurrentPage();
			// Add image Event
			for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
			{
				genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
			}
		}
		td_rightButton.appendChild(button_nextPage.getDomObj());
		
		//Add Back to Menu Button
		var button_Menu = new ButtomImage('assets/Pic/icon/back.png','assets/Pic/icon/back.png',30,45);
		td_menu.appendChild(button_Menu.getDomObj());
		button_Menu.getDomObj().onmousedown = function(e) 
		{
			// Display the menu bar
			gen_contentview.getDomObj().style.zIndex = '0';
			gen_toolbar.getDomObj().style.zIndex     = '1000';
			_state								     = 'normal';			
		}
		
		// Add Text box for get Specific Page
		var pageIndex_Genesis = new Element('input',{'type':'text','size':'1','value':'1','style':'text-align:center;'});
		pageIndex_Genesis.onkeypress = function(e) {
			//update page Index			
			var characterCode
			if(e && e.which){           // NN4 specific code
				e = e
				characterCode = e.which
			}
			else {
				e = event
				characterCode = e.keyCode // IE specific code
			}
			if (characterCode == 13)
			{
				if(!isNaN(parseInt(this.value)) || parseInt(this.value) == "" || parseInt(this.value) == null)
				{
					genesisBar.getSpecificPage(parseInt(this.value));
					pageIndex_Genesis.value = genesisBar.getCurrentPage();
					// Add image Event
					for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
					{
						genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
					}
				}
				else
				{
					pageIndex_Genesis.value = genesisBar.getCurrentPage();
					// Add image Event
					for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
					{
						genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
					}
				}
			}
		}
		
		td_menu.appendChild(pageIndex_Genesis);
		var maxpage = parseInt(genArray.length/(row*column));
		if(parseInt(genArray.length%(row*column)) != 0)
		{
			maxpage++;
		}
		td_menu.insert('/'+maxpage);
		
		// Set hidden after finish create imge view bar
		gen_contentview.getDomObj().style.zIndex = '0';
	</script>
	
	<script type="text/javascript">
		// External Embeded Code View Bar
		var gen_externalembededview = new Genesis(tool_position_x,tool_position_y);
		gen_externalembededview.getDomObj().style.background = "#666666";
		gen_externalembededview.setSize(600,75);
		
		document.getElementsByTagName('Body')[0].appendChild(gen_externalembededview.getDomObj());
		//document.documentElement.childNodes[1].appendChild(gen_externalembededview.getDomObj());
		
		var table_externalembededview      = new Element('table',{'style':'position:absolute;width:100%;height:100%;left:0px;top:0px;'});
		gen_externalembededview.getDomObj().appendChild(table_externalembededview);
		
		var tableBody_externalembededview  = new Element('tbody',{});
		table_externalembededview.appendChild(tableBody_externalembededview);
		
		var tr_externalembededview    	 = new Element('tr',{});
		tableBody_externalembededview.appendChild(tr_externalembededview);
		
		var td_leftButton  = new Element('td',{'width':'5%'});
		var td_display    = new Element('td',{'width':'80%'});
		var td_menu	      = new Element('td',{'width':'10%','align':'center'});
		var td_rightButton = new Element('td',{'width':'5%'});
		tr_externalembededview.appendChild(td_leftButton);
		tr_externalembededview.appendChild(td_display);
		tr_externalembededview.appendChild(td_menu);
		tr_externalembededview.appendChild(td_rightButton);
		
		var genArray = new Array();
		genArray.push("assets/Pic/image/embeded.png");
		
		var row 	= 1;
		var column 	= 5;
		var genesisBar = new ImageViewBar(genArray,65,65,row,column);
		td_display.appendChild(genesisBar.getDomObj());
		
		// Add image Event
		for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
		{
			genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
		}
		
		// Add button for get Previous Page
		var button_previousPage = new ButtomImage('assets/Pic/icon/arrow_left.png','assets/Pic/icon/arrow_left.png',30,65);
		button_previousPage.getDomObj().onmousedown = function(e) {
			genesisBar.getPreviousPage();
			pageIndex_Genesis.value = genesisBar.getCurrentPage();
			// Add image Event
			for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
			{
				genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
			}
   		}
		td_leftButton.appendChild(button_previousPage.getDomObj());
		
		// Add button for get Next Page
		var button_nextPage = new ButtomImage('assets/Pic/icon/arrow_right.png','assets/Pic/icon/arrow_right.png',30,65);
		button_nextPage.getDomObj().onmousedown = function(e) {
			genesisBar.getNextPage();
			pageIndex_Genesis.value = genesisBar.getCurrentPage();
			// Add image Event
			for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
			{
				genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
			}
		}
		td_rightButton.appendChild(button_nextPage.getDomObj());
		
		//Add Back to Menu Button
		var button_Menu = new ButtomImage('assets/Pic/icon/back.png','assets/Pic/icon/back.png',30,45);
		td_menu.appendChild(button_Menu.getDomObj());
		button_Menu.getDomObj().onmousedown = function(e) 
		{
			// Display the menu bar
			gen_externalembededview.getDomObj().style.zIndex = '0';
			gen_toolbar.getDomObj().style.zIndex     = '1000';
			_state								     = 'normal';			
		}
		
		// Add Text box for get Specific Page
		var pageIndex_Genesis = new Element('input',{'type':'text','size':'1','value':'1','style':'text-align:center;'});
		pageIndex_Genesis.onkeypress = function(e) {
			//update page Index			
			var characterCode
			if(e && e.which){           // NN4 specific code
				e = e
				characterCode = e.which
			}
			else {
				e = event
				characterCode = e.keyCode // IE specific code
			}
			if (characterCode == 13)
			{
				if(!isNaN(parseInt(this.value)) || parseInt(this.value) == "" || parseInt(this.value) == null)
				{
					genesisBar.getSpecificPage(parseInt(this.value));
					pageIndex_Genesis.value = genesisBar.getCurrentPage();
					// Add image Event
					for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
					{
						genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
					}
				}
				else
				{
					pageIndex_Genesis.value = genesisBar.getCurrentPage();
					// Add image Event
					for (var i =0;i<genesisBar.getDomObj().getElementsByTagName('img').length;i++)
					{
						genesisBar.getDomObj().getElementsByTagName('img')[i].onmousedown = OnMouseDown;
					}
				}
			}
		}
		
		td_menu.appendChild(pageIndex_Genesis);
		var maxpage = parseInt(genArray.length/(row*column));
		if(parseInt(genArray.length%(row*column)) != 0)
		{
			maxpage++;
		}
		td_menu.insert('/'+maxpage);
		
		// Set hidden after finish create imge view bar
		gen_externalembededview.getDomObj().style.zIndex = '0';
	</script>
	
	<script type="text/javascript">
		// Generate Property Bar
		var gen_property = new Genesis(300,1000);
    	gen_property.getDomObj().style.background = "#666666";
		gen_property.getDomObj().style.overflow   = "auto";
		gen_property.setSize(600,150);
		
		// move button
		var move_button_offsetX  = 0;  // mouse starting positions 
		var move_button_offsetY  = 0; 
		var move_button = new BookImage("assets/Pic/icon/arrow_left.png",600-15,0);
		move_button.setSize(15,15);
		
		function addMove_Propertybar_action()
		{
			move_button_offsetX = 0;
			move_button_offsetY = 0; 
			gen_property.getDomObj().appendChild(move_button.getDomObj());
			
			// add mouse drag and drop to the image on the right of the property bar
			// 1. mouse down
			move_button.getDomObj().onmousedown = function(e) 
			{
				// Start drag
				if (e == null)
				{
					e = window.event; 
				}

				// for Firefox, left click == 0 || for IE, left click == 1                                                                                                                        document must not have any object on drag
				if (e.button == 1 && window.event != null || e.button == 0) 
				{
					var mouse_x = mouseX(e);
					var mouse_y = mouseY(e);
					
					move_button_offsetX = ExtractNumber(gen_property.getDomObj().style.left) - mouseX(e);
					move_button_offsetY = ExtractNumber(gen_property.getDomObj().style.top)  - mouseY(e);
					
					// prevent text selection in IE 
					document.onselectstart = function () { return false; }; 
					// prevent IE from trying to drag an image 
					gen_property.getDomObj().ondragstart = function() { return false; }; 
					// prevent text selection (except IE) 
					
					// 2. mouse move
					document.onmousemove = function(e) 
					{
						// Start drag
						if (e == null)
						{
							e = window.event; 
						}
						var mouse_x = mouseX(e);
						var mouse_y = mouseY(e);
						gen_property.setPosition(mouse_x + move_button_offsetX,mouse_y + move_button_offsetY);
					}
					
					// 3. mouse up
					document.onmouseup = function(e) 
					{
						// End drag
						document.onmousemove = null;
						document.onmouseup = null;
					}
				}
			}
		}
		addMove_Propertybar_action();
		document.getElementsByTagName("Body")[0].appendChild(gen_property.getDomObj());
	</script>
	
	<script type="text/javascript">
        // Add Text Editor Whizzywig
		makeWhizzyWig("whizzy",myButtons);
        var divTextEditor  = null;
        var timeHTML       = null;
        //divTextEditor = document.getElementById('sink');
        //setTextHTML('Edit Text');
		//clearSinkHTML();
    </script>
	
<script type="text/javascript" >
	var user_id = document.getElementById("uid").value;
	var book_id = null;
	disableEditToolBar();
	
	/****************************************************
	* FUNCTION
	*		initBook
	*
	* DESCRIPTION
	* 		Initial book.
	*
	* ARGUMENTS
	*		id		:	Book id.
	*
	****************************************************/
	function initBook(id)
	{	
		book_id = id;
		loadPageSrc(user_id,book_id);
	}	
	
	function loadPageSrc(user_id,book_id)
	{
		var path = getUpdatePath(window.location)+'getBookDetails.php'+ '?user_id='+user_id+'&book_id='+book_id;
		var myAjax = new Ajax.Request(path, 
		{
			method: 'post', onComplete:function(transport)
			{
				transport.responseText = decodeURIComponent(transport.responseText);
				
				var Data = transport.responseText;
				var DataSet = Data.split(",");
				var BookNameLabel = document.getElementById("BookName");
				BookNameLabel.innerHTML = DataSet[0];
				var BookDescLabel = document.getElementById("BookDesc");
				BookDescLabel.innerHTML = DataSet[1];

				var myPageW=450; //page width
				var myPageH=550; //page height
				
				var SimpleShadow 		= "assets/Pic/PageShadow.jpg";
				var SimplePageTexture 	=  DataSet[2];	//"assets/Pic/PageTexture4.jpg";
				var RotateToken 		= "assets/Pic/Rotatetor.png";
				var BorderLine 			= "assets/Pic/BorderLine.jpg";
				var BookBinder 			=  DataSet[3];	//"assets/Pic/Binder1.jpg";
				var BookBackground 		=  DataSet[4];	//"assets/Pic/Page_create_pic/Background/green_background.jpg";
				var bookname = "Book1";
				
				var PageCute 			= new Array("assets/Pic/PageTexture4.jpg", "assets/Pic/PageTexture4.jpg", "assets/Pic/PageTexture4.jpg","assets/Pic/PageTexture4.jpg","assets/Pic/PageTexture4.jpg","assets/Pic/PageTexture4.jpg","assets/Pic/PageTexture4.jpg","assets/Pic/PageTexture4.jpg","assets/Pic/PageTexture4.jpg","assets/Pic/PageTexture4.jpg","assets/Pic/PageTexture4.jpg","assets/Pic/PageTexture4.jpg");
				var extArray2 			= new Array("assets/Pic/SampleContent3.jpg", "assets/Pic/SampleContent3.jpg", "assets/Pic/SampleContent3.jpg","assets/Pic/SampleContent3.jpg","assets/Pic/SampleContent3.jpg","assets/Pic/SampleContent3.jpg","assets/Pic/SampleContent3.jpg","assets/Pic/SampleContent3.jpg","assets/Pic/SampleContent3.jpg","assets/Pic/SampleContent3.jpg","assets/Pic/SampleContent3.jpg","assets/Pic/SampleContent3.jpg");
				var extArray6 			= new Array("assets/Pic/SampleContent2.jpg", "assets/Pic/SampleContent2.jpg", "assets/Pic/SampleContent2.jpg","assets/Pic/SampleContent2.jpg","assets/Pic/SampleContent2.jpg","assets/Pic/SampleContent2.jpg","assets/Pic/SampleContent2.jpg","assets/Pic/SampleContent2.jpg","assets/Pic/SampleContent2.jpg","assets/Pic/SampleContent2.jpg","assets/Pic/SampleContent2.jpg","assets/Pic/SampleContent2.jpg");
				var extArray 			= new Array("assets/Pic/PageTexture0.jpg",   "assets/Pic/PageTexture0.jpg",   "assets/Pic/PageTexture0.jpg",  "assets/Pic/PageTexture0.jpg",  "assets/Pic/PageTexture0.jpg",  "assets/Pic/PageTexture0.jpg",  "assets/Pic/PageTexture0.jpg",  "assets/Pic/PageTexture0.jpg",  "assets/Pic/PageTexture0.jpg",  "assets/Pic/PageTexture0.jpg",  "assets/Pic/PageTexture0.jpg",  "assets/Pic/PageTexture0.jpg");
				var extArray3 			= new Array("assets/Pic/PageTexture1.jpg",   "assets/Pic/PageTexture1.jpg",   "assets/Pic/PageTexture1.jpg",  "assets/Pic/PageTexture1.jpg",  "assets/Pic/PageTexture1.jpg",  "assets/Pic/PageTexture1.jpg",  "assets/Pic/PageTexture1.jpg",  "assets/Pic/PageTexture1.jpg",  "assets/Pic/PageTexture1.jpg",  "assets/Pic/PageTexture1.jpg",  "assets/Pic/PageTexture1.jpg",  "assets/Pic/PageTexture1.jpg");
				var extArray4 			= new Array("assets/Pic/PageTexture2.jpg",   "assets/Pic/PageTexture2.jpg",   "assets/Pic/PageTexture2.jpg",  "assets/Pic/PageTexture2.jpg",  "assets/Pic/PageTexture2.jpg",  "assets/Pic/PageTexture2.jpg",  "assets/Pic/PageTexture2.jpg",  "assets/Pic/PageTexture2.jpg",  "assets/Pic/PageTexture2.jpg",  "assets/Pic/PageTexture2.jpg",  "assets/Pic/PageTexture2.jpg",  "assets/Pic/PageTexture2.jpg");
				var extArray5 			= new Array("assets/Pic/Page0.jpg",          "assets/Pic/Page1.jpg",          "assets/Pic/Page2.jpg",         "assets/Pic/Page3.jpg",         "assets/Pic/Page4.jpg",         "assets/Pic/Page5.jpg",         "assets/Pic/Page6.jpg",         "assets/Pic/Page7.jpg",         "assets/Pic/Page8.jpg",         "assets/Pic/Page8.jpg",         "assets/Pic/Page9.jpg",         "assets/Pic/Page0.jpg");
				
				Book = new Book(bookname,myPageW,myPageH,extArray,SimplePageTexture,BookBinder,BookBackground,SimpleShadow,BorderLine,20);
				Book.AddPageIndexPanel();
				Book.Create();
				loadPage(user_id,book_id,0);
			}
		},false);
	}
	
	/****************************************************
	* FUNCTION
	*		loadPage
	*
	* DESCRIPTION
	* 		Use for load page by using Ajax
	*
	* ARGUMENTS
	*		user_id 		:	User id
	*		book_id 		:	Book id
	*		page_number 	:	Page Number
	*
	****************************************************/
	function loadPage(user_id,book_id,page_number)
	{
		if(Book.IsPageLoadArray[page_number] == false )
		{
			Book.IsPageLoadArray[page_number] = true;
			var path = getUpdatePath(window.location)+'getBook.php'+ '?user_id='+user_id+'&book_id='+book_id+'&page_number='+(page_number + 1);
			var myAjax = new Ajax.Request(path, 
			{
				method: 'post', onComplete:function(transport)
				{
					transport.responseText = decodeURIComponent(transport.responseText);
					RWXml.loadXML(transport.responseText,Book.bookGenesisContainer[page_number]);
				}
			},false);
		}
	}
	
	/****************************************************
	* FUNCTION
	*		savePage
	*
	* DESCRIPTION
	* 		Use for load page by using Ajax
	*
	* ARGUMENTS
	*		user_id 		:	User id
	*		book_id 		:	Book id
	*		page_number 	:	Page Number
	*		page_data		:	Page xml data
	*
	****************************************************/
	function savePage(user_id,book_id,page_number,page_data)
	{
		page_data = encodeURIComponent(page_data);
		var path = getUpdatePath(window.location)+'saveBook.php'+ '?user_id='+user_id+'&book_id='+book_id+'&page_number='+page_number+'&data='+page_data;
		var myAjax = new Ajax.Request(path, 
		{
			method: 'post', onComplete:function(transport)
			{
			}
		},false);
	}
	
	/****************************************************
	* FUNCTION
	*		getUpdatePath
	*
	* DESCRIPTION
	* 		Use for get php path folder
	*
	* ARGUMENTS
	*		fullpath 		:	Full path of running page.
	*
	****************************************************/
	function getUpdatePath(fullpath)
	{
		var x = fullpath.toString().indexOf("index.php");
		var url = fullpath.toString().substring(0,x) + "updater/";
		return url;
	}
	
	/****************************************************
	* FUNCTION
	*		startEditBook
	*
	* DESCRIPTION
	* 		Use for start mode Edit the book genesis component.
	*
	* ARGUMENTS
	*		pageLeft		:	Array Genesis object page left.
	*		pageRight		: 	Array Genesis object page right..
	*
	****************************************************/
	function startEditBook(pageLeft,pageRight)
	{
		// Remove Book Action
		// Set Edit Page
		Book.DisableMouseEvent();
		
		bookGenesisContainer = new Array();
		bookGenesisContainer = [];
		
		
		if(pageLeft == pageRight )
		{
			bookGenesisContainer[0] = Book.bookGenesisContainer[pageLeft];
		}
		else
		{
			bookGenesisContainer[0] = Book.bookGenesisContainer[pageLeft];
			bookGenesisContainer[1] = Book.bookGenesisContainer[pageRight];
		}
		
		// Add all Genesis event, and add all set code for easy to edit
		for (var i = bookGenesisContainer.length-1;i>=0;i--) 
		{
			for(var j = bookGenesisContainer[i].length-1;j>=1;j--)
			{
				bookGenesisContainer[i][j].getDomObj().onmousedown      = genesis_OnMouseDown;
				if(bookGenesisContainer[i][j].getDomType() == "ExternalEmbeded")
				{
					bookGenesisContainer[i][j].setCode(bookGenesisContainer[i][j].getCode());
				}
			}
		}
		
		// Add Edit Tools Bar
		enableEditToolBar();
	}
	
	/****************************************************
	* FUNCTION
	*		stopEditBook
	*
	* DESCRIPTION
	* 		Use for stop mode Edit the book genesis component.
	*
	****************************************************/
	function stopEditBook()
	{
		disableEditToolBar();
		document.onmousemove    = null; 
		document.onselectstart  = null; 
		document.onmouseup      = null;
		document.onmousedown    = null;
		
		// Clear all Genesis event
		for (var i = bookGenesisContainer.length-1;i>=0;i--) 
		{
			for(var j = bookGenesisContainer[i].length-1;j>=0;j--)
			{
				bookGenesisContainer[i][j].getDomObj().onmouseover 		= null;
				bookGenesisContainer[i][j].getDomObj().onmouseout  		= null;
				bookGenesisContainer[i][j].getDomObj().onmousedown      = null;
				
				if(bookGenesisContainer[i][j].getDomType() == "ExternalEmbeded")
				{
					bookGenesisContainer[i][j].setNormalCode(bookGenesisContainer[i][j].getCode());
				}
			}
		}
		Book.EnableMouseEvent();
		bookGenesisContainer = null;
	}
	
	/****************************************************
	* FUNCTION
	*		enableEditToolBar
	*
	* DESCRIPTION
	*	Enable tool bar for starting edit book Obj.
	*
	* ARGUMENTS
	*
	****************************************************/
	function enableEditToolBar()
	{
		var bookGenesisContainer = new Array(); 
		gen_toolbar.getDomObj().style.display = 'block';
		gen_genesisview.getDomObj().style.display = 'block';
		gen_imageview.getDomObj().style.display = 'block';
		gen_contentview.getDomObj().style.display = 'block';
		gen_externalembededview.getDomObj().style.display = 'block';
		gen_property.getDomObj().style.display = 'block';
	}
	
	/****************************************************
	* FUNCTION
	*		disableEditToolBar
	*
	* DESCRIPTION
	*	Disable tool bar for stoping edit book Obj.
	*
	* ARGUMENTS
	*
	****************************************************/
	function disableEditToolBar()
	{
		var bookGenesisContainer = new Array(); 
		gen_toolbar.getDomObj().style.display = 'none';
		gen_genesisview.getDomObj().style.display = 'none';
		gen_imageview.getDomObj().style.display = 'none';
		gen_contentview.getDomObj().style.display = 'none';
		gen_externalembededview.getDomObj().style.display = 'none';
		gen_property.getDomObj().style.display = 'none';
		
		// Remove Resize action
		_resizeArea.getDomObj().style.display    = "none";
		if (_dragElement != null) 
		{
			// Re all genesis default value
			_dragElement.getDomObj().style.zIndex	   	 = "";
			_dragElement.getDomObj().style.border 	 = "";
			_dragElement.getDomObj().style.borderColor = "";
			_dragElement = null;
		}
	}
</script>
</div>
<!-- End Tong's Book -->
</com:TContent>